// 用于首页的数据展示
<template>
  <div class="threeBarChart"></div>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  },
  computed: {
    reset() {
      return this.$store.getters.sidebar.opened
    }
  },
  props: {
    xline: Array, // x轴名称列表
    yline: Array, // y轴数据
    config: Object // 参数配置
  },

  methods: {
    // 重新绘制图表
    forceRerender() {
      // console.log('width: ' + this.myChart.getWidth)

      // this.myChart.clear()
      // this.setChart()
    },
    setChart() {
      this.myChart = this.$echarts(this.$el);
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(this.option);
    }
  },
  data() {
    return {
      show: true,
      myChart: undefined,
      option: {
        grid: {
          top: "20%",
          bottom: "15%",
          left: 40,
          right: 40,
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          top: "10%",
          orient: 'vertical',
          feature: {
            // saveAsImage:{},
            dataZoom: {},
            magicType: {
              type: ['stack']
            }
          }
        },
        legend: {
          type: 'scroll',
          left: "8%",
          top: "10%",
          itemWidth: 7,
          itemHeight: 7,
          textStyle: {
            color: '#5CB1C1',
            fontSize: 10
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',

            symbolOffset: 5,
            axisLine: {
              // symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              lineStyle: {
                color: '#122C49'
              }
            },
            // axisLabel: {
            //     color: '#61B9C8',
            //     // showMaxLabel: false,
            //     fontSize: 10
            // },
            axisLabel: {
              show: false
            },
            data: this.xline
          }
        ],
        yAxis: [
          {
            type: 'value',
            interval: this.config.interval,
            min: this.config.min,
            max: this.config.max,
            splitNumber: 7,
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              lineStyle: {
                color: '#122C49'
              }
            },
            axisLabel: {
              color: '#61B9C8',
              showMaxLabel: false,
              fontSize: 10
            },
            splitLine: {
              show: false,
            },
            name: '',
            nameGap: -10,
            nameTextStyle: {
              color: '#61B9C8',
              fontSize: 9,
              align: 'right',
              padding: [0, 6, 0, 0]
            }
          },
        ],
        series: [
          {
            name: '待处理',
            type: 'bar',
            barGap: 0,
            // barWidth: 6,
            data: this.yline[0],
            itemStyle: {
              // barBorderRadius: [3, 3, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: 'rgba(139, 156, 173,1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(139, 156, 173,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              } //背景渐变色
            }
          },
          {
            name: '处理中',
            type: 'bar',
            barGap: 0,
            // barWidth: 6,
            data: this.yline[1],
            itemStyle: {
              // barBorderRadius: [3, 3, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: 'rgba(240, 167, 245,1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(119, 40, 180,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              } //背景渐变色
            }
          },
          {
            name: '已处理',
            type: 'bar',
            barGap: 0,
            // barWidth: 6,
            data: this.yline[2],
            itemStyle: {
              // barBorderRadius: [3, 3, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0, color: 'rgba(17, 23, 140,1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(42, 8, 96,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              } //背景渐变色
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.setChart()
  },
  watch: {
    reset() {
      this.forceRerender()
    }
  }
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: 100%;
  width: 100%;
}
</style>
